<!DOCTYPE HTML SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="/common/base_head :: commonHead('修改用户')"></head>
<style>
    /*左边照片*/
    .setting_cont_personal_right{
        width: 300px;
        height: 240px;
        border: 1px solid #eee;
        margin: 10px auto;
        position: relative;
        left: 15px;
    }
    .setting_file{
        position: absolute;
        width: 300px;
        height: 240px;
        border-radius: 40px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 20;
        border: 1px solid red;
        text-align: center;
    }
    .setting_cont_personal_right img{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 15;
    }
    .setting_cont_personal_right>p{
        position: absolute;
        width: 100%;
        line-height: 100%;
        font-size: 20px;
        top: 45%;
        color: #666;
        text-align: center;
        z-index: 10;
    }
    /*左边照片*/
</style>
<body>
<article class="page-container">
    <form th:action="@{/sysuser/update}" method="post" class="form form-horizontal" id="form-member-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户姓名：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="hidden" class="input-text" th:value="${sysUser.id}" placeholder="" id="id" name="id">
                <input type="hidden" class="input-text" th:value="${sysUser.code}" placeholder="" id="code" name="code">
                <input type="text" class="input-text" th:value="${sysUser.name}" placeholder="" id="name" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户账号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" th:value="${sysUser.username}" placeholder="" id="username" name="username">
            </div>
        </div>
       <!-- <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>初始密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" th:value="${sysUser.password}" placeholder="密码" id="password" name="password">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>确认密码：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="password" class="input-text" autocomplete="off" th:value="${sysUser.password}" placeholder="确认新密码" id="password2" name="password2">
            </div>
        </div>-->
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">头像：</label>
            <!--照片-->
            <div class="formControls col-xs-8 col-sm-9 setting_cont_personal_right">
                <input type="file" id="photo" name="photoFile" class="setting_file" value="${sysUser.photo}" placeholder="上传头像" autocomplete="off"/>
                <img th:src="${sysUser.photo}"/>
                <p>点击上传图片</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>职责：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="type" type="radio" id="type-1" th:value="1" th:checked="${'1' eq sysUser.type}">
                    <label for="sex-1">医生</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="type-2" name="type" th:value="2" th:checked="${'2' eq sysUser.type}">
                    <label for="sex-2">护士</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">职称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" th:value="${sysUser.title}" placeholder="" id="title" name="title">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">工号：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" th:value="${sysUser.worknumber}" placeholder="" id="worknumber" name="worknumber">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="sex" type="radio" id="sex-1" th:value="1" th:checked="${'1' eq sysUser.sex}">
                    <label for="sex-1">男</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-2" name="sex" th:value="2" th:checked="${'2' eq sysUser.sex}">
                    <label for="sex-2">女</label>
                </div>
                <div class="radio-box">
                    <input type="radio" id="sex-3" name="sex" th:value="3" th:checked="${'3' eq sysUser.sex}">
                    <label for="sex-3">保密</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">手机：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" th:value="${sysUser.tel}" placeholder="" id="mobile" name="tel">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">邮箱：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" th:value="${sysUser.email}" placeholder="@" name="email" id="email">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>所属科室：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="ownedqueue" onchange="getDeptroom()">
					<option value="">请选择科室</option>
                    <option th:each="dept: ${baseDeptList}" th:value="${dept.code}" th:selected="${sysUser.ownedqueue == dept.code}">[[${dept.name}]]</option>
				</select>
				</span>
            </div>
        </div>

        <div class="row cl"  th:id="deptroom">
            <label class="form-label col-xs-4 col-sm-3">所属诊室：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="roomcode" th:id="selectdeptroom">
					<option value="">请选择诊室</option>
                    <option th:each="deptroom: ${baseDeptroomList}" th:value="${deptroom.code}" th:selected="${sysUser.roomcode == deptroom.code}">[[${deptroom.name}]]</option>
				</select>
				</span>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>选择角色：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
				<select class="select" size="1" name="rolecode">
					<option value="">请选择角色</option>
                    <option th:each="RoleLeftUserRole: ${sysUserroleList}" th:value="${RoleLeftUserRole.code}" th:selected="${RoleLeftUserRole.userCode != null}">[[${RoleLeftUserRole.name}]]</option>
				</select>
				</span>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否使用：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="isuse" type="radio" id="isuse-1" th:value="1" th:checked="${'1' eq sysUser.isuse}">
                    <label for="isuse-1">是</label>
                </div>
                <div class="radio-box">
                    <input name="isuse" type="radio" id="isuse-2" th:value="0" th:checked="${'0' eq sysUser.isuse}">
                    <label for="isuse-2">否</label>
                </div>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="memo" cols="" rows="" class="textarea"  placeholder="" onKeyUp="$.Huitextarealength(this,100)">[[${sysUser.memo}]]</textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<div th:include="footer :: base_script"></div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" th:src="@{/static/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/static/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript">

    function getDeptroom(){
        var deptcode = $('select  option:selected').val();
        $.ajax({
            type : "get",
            url : "/sysuser/getDeptroom?deptcode="+deptcode,
            dataType: 'json',
            success : function(data) {
                if("success"==data.status){
                    $("#deptroom").show();
                    $("#selectdeptroom").empty();
                    var result = data.baseDeptroomList;
                    console.log(result)
                    for(var i=0; i<result.length; i++){
                        console.log(result[i].code);
                        $("#selectdeptroom").append(" <option value='"+result[i].code+"'>"+result[i].name+"</option>");
                    }
                }
            }
        });
    }


    $(function(){
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-member-add").validate({
            rules:{
                name:{
                    required:true,
                    minlength:1,
                    maxlength:50
                },
                username:{
                    required:true,
                    minlength:1,
                    maxlength:50
                },
                type:{
                    required:true,
                },
                title:{
                    required:false,
                    minlength:1,
                    maxlength:50
                },
                worknumber:{
                    required:false,
                    minlength:1,
                    maxlength:50
                },
                /* password:{
                     required:true,
                 },
                 password2:{
                     required:true,
                     equalTo: "#password"
                 },*/
                sex:{
                    required:true,
                },
                mobile:{
                    required:false,
                    isMobile:true,
                },
                email:{
                    required:false,
                    email:true,
                },
                ownedqueue:{
                    required:true,
                },
                rolecode:{
                    required:true,
                },
                isuse:{
                    required:true,
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                $(form).ajaxSubmit({
                    type: 'post', // 提交方式 get/post
                    success:function(data){
                        var obj = JSON.parse(data);
                        var status = obj.status;
                        if("success"==status) {
                            layer.alert("保存成功！", function() {
                                closeWindow();
                            });
                        } else {
                            layer.alert(obj.data);
                        }
                    }
                });
            }
        });

        //设置用户头像
        $('.setting_file').change(function() {
            return change(this, 'file-one');
        });

        function change(obj, itemId) {
            var a = URL.createObjectURL(obj.files[0]);
            var urla = obj.files[0];
            $('.setting_cont_personal_right>img').remove();
            var template = '<img src="'+a+'"  />';
            $('.setting_cont_personal_right').append(template);
        }
    });

    //关闭窗口
    function closeWindow() {

        parent.location.href = "/sysuser/toList";

        var index = parent.layer.getFrameIndex(window.name);
        //parent.$('.btn-refresh').click();
        parent.layer.close(index);
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>